<template>
  <div>
    <creat v-if="showcreat" @close="closeShow('showcreat')" :detailId="detailId" :type="type" @success="refreshList(pageNo)"></creat>
    <check v-else-if="showcheck" @close="showcheck = false"></check>
    <show v-else-if="show" @close="closeShow('show')" :detailId="detailId"></show>
    <div v-else>
      <basic-container>
        <!-- <el-header> -->
        <div class="flex_row" style="align-items: flex-start">
          <el-button size="small" type="success" @click="creatNew()" v-if="permission.rmysq_create">新增</el-button>
          <el-form :inline="true" size="small" class="ml30" ref="form" :model="form" @keyup.enter.native="refreshList()">
            <el-form-item label="任命或授权管理编号:"><el-input placeholder="请输入" class="w160" v-model="form.number"></el-input></el-form-item>
            <el-form-item label="任命或授权名称:"><el-input placeholder="请输入" v-model="form.name" class="w160"></el-input></el-form-item>
            <el-form-item label="任命或授权岗位:">
              <el-cascader
                class="w160"
                placeholder="请选择"
                ref="newdept"
                :options="gangweiList"
                v-model="form.appointmentPostId"
                :show-all-levels="false"
                :props="{
                  value: 'id',
                  label: 'postName',
                  emitPath: false,
                }"
                filterable
              ></el-cascader>
            </el-form-item>
            <block style="margin-top: 0px" v-if="showmore">
				<el-form-item label="任命或授权人员:">
              <el-cascader
                class="w160"
                placeholder="请选择"
                ref="newdept"
                :options="userList"
                v-model="form.appointmentUserId"
                :show-all-levels="false"
                :props="{
                  value: 'id',
                  label: 'name',
                  emitPath: false,
                }"
                filterable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="管理部门:">
              <el-cascader
                class="w160"
                placeholder="请选择"
                ref="newdept"
                :options="deptOption"
                v-model="form.manageDeptId"
                :show-all-levels="false"
                :props="{
                  value: 'id',
                  label: 'deptName',
                  emitPath: false,
                  checkStrictly: true,
                }"
                filterable
              ></el-cascader>
            </el-form-item>
              <el-form-item label="负责人:">
                <el-select placeholder="请选择" v-model="form.manageUserId" filterable class="w160">
                  <el-option v-for="(item, i) in userList" :key="i" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="记录保存年限(年):"><el-input placeholder="请输入" class="w160" v-model="form.retentionPeriod"></el-input></el-form-item>
              <el-form-item label="编制部门:">
                <el-cascader
                  class="w160"
                  placeholder="请选择"
                  ref="newdept"
                  :options="deptOption"
                  v-model="form.createDept"
                  :show-all-levels="false"
                  :props="{
                    value: 'id',
                    label: 'deptName',
                    emitPath: false,
                    checkStrictly: true,
                  }"
                  filterable
                ></el-cascader>
              </el-form-item>
              <el-form-item label="编制人:">
                <el-select placeholder="请选择" v-model="form.createUser" filterable class="w160">
                  <el-option v-for="(item, i) in userList" :key="i" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="提交日期:">
                <el-date-picker class="w140" v-model="form.beginSubmitDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"></el-date-picker>
                -
                <el-date-picker class="w140" v-model="form.endSubmitDate" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="生效日期:">
                <el-date-picker class="w140" v-model="form.beginApproveDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"></el-date-picker>
                -
                <el-date-picker class="w140" v-model="form.endApproveDate" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </block>
            <el-form-item style="margin-right:0">
              <el-button type="primary" @click="refreshList(1)">查询</el-button>
              <el-button type="default" plain @click="resetSearch">重置</el-button>
              <el-button type="primary" plain @click="showmore = !showmore">
                更多筛选条件
                <i :class="{ 'el-icon-arrow-down': !showmore, 'el-icon-arrow-up': showmore }"></i>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- </el-header> -->
      </basic-container>
      <basic-container>
        <el-table class="show" ref="table" :data="tableData" :height="$height - 290 + 'px'" v-loading="loading">
          <el-table-column type="expand" width="1">
            <template slot-scope="scope">
              <div class="flex_row">
                <table class="">
                  <tr v-for="item in scope.row.appointmentList" :key="item.id">
                    <td class="cell" width="50"></td>
                    <td class="cell" width="160"></td>
                    <td class="cell" min-width="140" :width="getAdaptionWidth('name', tableData)">{{ item.name || '-' }}</td>
                    <td class="cell" width="140">{{ item.appointmentPostName || '-'}}</td>
                    <td class="cell" width="140">{{ item.appointmentUserName || '-'}}</td>
                  </tr>
                </table>
                <table>
                  <tr v-for="(item, i) in scope.row.jiluFileList" :key="i">
                    <td class="cell" width="110">{{ item.fileNumber }}</td>
                    <td class="cell" :width="getAdaptionWidth('fileName', tableData)">{{ item.name }}</td>
                    <td class="cell" :width="getAdaptionWidth('serialNumber', tableData)">{{ item.serialNumber }}</td>
                  </tr>
                </table>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="任命或授权管理编号" prop="number" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column label="任命或授权名称" prop="name" min-width="140" :width="getAdaptionWidth('name', tableData)"></el-table-column>
          <el-table-column label="任命或授权岗位" prop="appointmentPostName" width="140"></el-table-column>
          <el-table-column label="任命或授权人员" width="140" prop="appointmentUserName"></el-table-column>
          <el-table-column label="记录文件编号" prop="fileNumber" width="110"></el-table-column>
          <el-table-column label="记录文件名称" prop="fileName" min-width="110" :width="getAdaptionWidth('fileName', tableData)"></el-table-column>
          <el-table-column label="记录流水编号" prop="serialNumber" min-width="110" :width="getAdaptionWidth('serialNumber', tableData)"></el-table-column>
		  <el-table-column prop="manageDeptName" label="管理部门" min-width="100" :width="getAdaptionWidth('manageDeptName', tableData)"></el-table-column>
          <el-table-column prop="manageUserName" label="负责人" :width="getAdaptionWidth('manageUserName', tableData)"></el-table-column>
		  <el-table-column prop="retentionPeriod" label="记录保存年限(年)" width="130"></el-table-column>
          <el-table-column prop="createDeptName" label="编制部门" :width="getAdaptionWidth('createDeptName', tableData)"></el-table-column>
          <el-table-column prop="createUserName" label="编制人" :width="getAdaptionWidth('createUserName', tableData)"></el-table-column>
          <el-table-column label="提交时间" prop="createTime" width="160"></el-table-column>
          <el-table-column label="批准日期" width="100">
            <template slot-scope="scope">
              {{ scope.row.beginTime.substr(0, 10) || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="工作流状态" fixed="right" width="100">
            <template slot-scope="scope">
              <span :class="processStatusList[scope.row.processStatus].class">
                {{ scope.row.processStatus >= 0 ? processStatusList[scope.row.processStatus].text : '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" fixed="right" width="360">
            <template slot-scope="scope">
              <template v-if="scope.row.showmoreBtn">
                <el-button type="success" size="mini" @click="toogleExpand(scope.row)">
                  {{ !scope.row.expansion ? '展开全部' : '收起全部' }}
                  <i class="white_f" :class="[!scope.row.expansion ? 'el-icon-arrow-right' : 'el-icon-arrow-down']"></i>
                </el-button>
              </template>
              <span v-else style="margin-left: 80px"></span>
              <span class="pointer main_co f14 ml30" v-if="permission.rmysq_show" @click="handleShow(scope.row)">查看</span>
              <span class="pointer main_co f14 ml30" v-if="scope.row.ishasDecrypt != 1 && userInfo.user_id == scope.row.createUser" @click="creatNew(scope.row, 2)"> 快捷新增 </span>
              <span class="pointer main_co f14 ml30" @click="applyShow(scope.row)" v-if="scope.row.ishasDecrypt == 1">解密</span>
              <span class="pointer red_f f14 ml30" v-if="permission.rmysq_del && scope.row.processStatus == 7 && userInfo.user_id == scope.row.createUser" @click="confirmDel(scope.row)"> 删除 </span>
              <span class="pointer main_co f14 ml30" v-if="userInfo.user_id == scope.row.createUser && permission.rmysq_create && scope.row.isDeleted == '0' && (scope.row.processStatus == 4 || scope.row.processStatus == 5 || scope.row.processStatus == 6)" @click="creatNew(scope.row, 1)"> 修改 </span>
            </template>
          </el-table-column>
          <empty slot="empty"></empty>
        </el-table>
        <el-card class="pub_right">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo" :page-size="pageSize" :total="total" background layout="total, prev, pager, next, jumper"></el-pagination>
        </el-card>
      </basic-container>
    </div>
    <encryption :list="rowFileList" ref="encryption"></encryption>
  </div>
</template>

<script>
import { getguifanList } from '@/api/myapi/tixiwenjian'
import creat from './creat.vue'
import check1 from './check1.vue'
import check from './check.vue'
import show from './show.vue'
export default {
  components: {
    creat,
    check1,
    check,
    show,
  },
  data() {
    return {
      type: 0,
      tableData: [],
      detailId: '',
      showcreat: false,
      showupgrade: false,
      showcheck: false,
      showmore: false,
      show: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      system: 'appointmentprocess',
      memberOption: [],
      form: {},
    }
  },
  created() {
    this.refreshList(1)
    this.getdeptlist()
    this.getAlluser()
    this.getGangweiList()
  },
  methods: {
    // 新建文件
    creatNew(row, type) {
      if (row) {
        this.type = type
        this.detailId = row.id
      } else {
        this.type = 0
        this.detailId = ''
      }
      this.showcreat = true
    },
    // 获取数据列表
    refreshList(pageNo) {
      this.showcreat = false
      this.showupgrade = false
      this.loading = true
      this.pageNo = pageNo
      getguifanList(
        {
          current: pageNo,
          size: this.pageSize,
          descs: 'create_time',
          ...this.form,
        },
        this.system
      ).then(({ data }) => {
        if (data && data.success) {
          let records = data.data.records
          for (let i = 0; i < records.length; i++) {
            let item = records[i]
            if ((item.appointmentList && item.appointmentList.length > 1) || (item.jiluFileList && item.jiluFileList.length > 1)) {
              item.showmoreBtn = true
            }
            if (item.appointmentList && item.appointmentList[0]) {
              delete item.appointmentList[0].id
              item = Object.assign(item, item.appointmentList[0])
              item.appointmentList.shift()
            }
            if (item.jiluFileList && item.jiluFileList[0]) {
              item.fileName = item.jiluFileList[0].name
              item.fileNumber= item.jiluFileList[0].fileNumber
              item.serialNumber = item.jiluFileList[0].serialNumber
              item.jiluFileList.shift()
            }
            if (item.jiluFileList.length > item.appointmentList.length) {
              item.appointmentList.push({})
            }
          }
          this.tableData = records
          this.total = data.data.total
          setTimeout(() => {
            this.loading = false
          }, 300)
        }
      })
    },
    resetSearch() {
      this.form = {}
      this.pageNo = 1
      this.refreshList(this.pageNo)
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.refreshList(val)
    },
  },
}
</script>

<style scoped="scoped">
::v-deep .el-table__expand-icon {
  font-size: 0 !important;
}
</style>
